<template>
  <div>
    <div class="mblog">
      <h2>{{ blog.title }}</h2><button @click="test" style="float:right;  border:1px solid #F00"  >立即购买 </button>
     
      <el-link icon="el-icon-edit" v-if="ownBlog">
        <router-link :to="{ name: 'tckedit', params: { blogId: blog.id } }">
          编辑
        </router-link>
      </el-link>
      
      <el-divider></el-divider>
      <div  style="float:right;" >数量:{{ blog.nums }}</div><br>
       <div  style="float:right;" >价格:{{ blog.price }}</div>
      <h1>{{ blog.description }}</h1>
      <!-- <img src="/images/rl_top.35edfde.png" /> -->

      <el-carousel :interval="5000" arrow="always" height="850px">
        <el-carousel-item v-for="item in imgList" :key="item.id" >
         
          <h3><!-- {{ item }} 测试 -->     <img  style="height:850px ;width: 1600px;" :src="item.idView" /></h3>
        </el-carousel-item>
      </el-carousel>

      <div class="content markdown-body" v-html="blog.contet"></div>
      
    </div>
  </div>
</template>

<script>
import "github-markdown-css/github-markdown.css";
import Header from "../components/Header";
export default {
  name: "BlogDetail.vue",
  //import 引入的组件需要注入到对象中才能使用
  components: { Header },
  props: {},
  data() {
    //这里存放数据
    return {
      
      imgList: [
        { id: 0, idView: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" },
        { id: 1, idView: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" },
      ],
      blog: {
        id: "",
        description: "请重新进入",
        title: "信息错误请重新进入",
        contet: "内容错误请重新进入",
        nums:0,
        price:100,
        tickmessage:{},
        picture:'',
      },
      ownBlog: false,
    };
  },

  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    test() {
      if(this.blog.nums>0){
      const _this = this;
       console.log('用户信息'+JSON.parse(sessionStorage.getItem("userInfo")).id)
       console.log('当前票务信息id'+this.blog.id);

       if(!JSON.parse(sessionStorage.getItem("userInfo")).id){
         console.log('kong')
         this.$notify({
      title: "请先登录！",
      message: "请登录后购买",
      duration: 1500,
    });
       }else{_this.$axios
        .get(`/tick/buy/${this.blog.id}/${JSON.parse(sessionStorage.getItem("userInfo")).id}`)
        .then((res) => {
          console.log("res", res);
          this.$notify({
      title: "购买成功",
      message: "可在我的订单中查询",
      duration: 1500,
    });
        });}

      
    }else{
      this.$notify({
      title: "购买失败",
      message: "已无票源！",
      duration: 1500,
    });
    }
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    const blogId = this.$route.params.blogId;
    
    console.log(blogId);
    const _this = this;
    
    this.$axios.get("/ticks/" + blogId).then((res) => {
      //这里修改发送的信息
      const blog = res.data.data;
      console.log("blog获取+++++++++++++++++++");
      console.log(blog);
      console.log("用户id获取")
      console.log(_this.$store.getters.getUser.id)
      if(blog.userId === _this.$store.getters.getUser.id){
        _this.ownBlog =true
        console.log(_this.ownBlog ) //判断是否是管理员创的商品
      }
      _this.blog.id = blog.id;
      _this.blog.title = blog.title;
      _this.blog.description = blog.description;
      _this.blog.contet = blog.contet;
      _this.imgList[0].idView=blog.picture;
      console.log('picture****************************')
      console.log(_this.imgList[0].idView)
      var MarkdownIt = require("markdown-it");
      var md = new MarkdownIt();
      var result = md.render(blog.content);
      
      _this.blog.content = result;
      _this.ownBlog = blog.userId === _this.$store.getters.getUser.id;
      



    });
    this.$axios.get("/tick/" + blogId).then((res2) => {
      const tickmsg = res2.data.data.records[0];
      console.log('tickmsg****************************')
      console.log(tickmsg.tickNum)
      _this.blog.nums=tickmsg.tickNum
      _this.blog.price=tickmsg.price
      console.log( _this.blog.nums)
      
      

    });


  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {},
};
</script>
<style scoped>
.mblog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 700px;
  padding: 20px 15px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>